<template>
    <div class="Login">
        <div class="Login_content">
          <div class="Login_left">
            <div class="Login_left_img"><img src="@a/img/bn3.png" /></div>
            <div class="Login_left_txt">
                <div class="left_txt_logo"><a href="/"><img src="@a/img/logo.png" /></a></div>
                <div class="left_txt_title">用AI狗，让科技成为你的得力助手！</div>
                <div class="left_txt_p">让AI狗成为你的得力搭档，一起开启智能新时代！</div>
            </div>
        </div>
        <div class="Login_right" v-if="showBind">
          <div >
            <div class="Login_right_title">手机号绑定微信</div>
            <div class="Login_right_content">
              <div class="right_content_message" >
                <div class="content_message_list">
                  <input type="tel" v-model="phone" ref="phoneInput" placeholder="手机号" />
                </div>
                <div class="content_message_list code">
                  <input type="text" v-model="code" placeholder="手机验证码" />
                  <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
                </div>
                <div class="content_message_password" :class="{ 'on': !phone }">
                  <div class="message_password_left">请输入手机号码和验证码</div>
                </div>
                <div class="content_message_submit" @click="login_bind" :disabled="!phone || !code">绑定登录</div>
              </div>
            </div>
          </div>
        </div>
        <div class="Login_right" v-if="!showBind">
            <div v-show="f==1">
                <div class="Login_right_title">登录</div>
                <!-- <div class="Login_right_nav">
                    <div class="right_nav_list" :class="n==1?'active':''" @click="n=1">短信登录</div>
                    <div class="right_nav_list" :class="n==2?'active':''" @click="n=2">密码登录</div>
                </div> -->
                <div class="Login_right_content">
                    <div class="right_content_message" v-show="n==1">
                        <div class="content_message_list">
                            <input type="tel" v-model="phone" ref="phoneInput" placeholder="手机号" />
                        </div>
                        <div class="content_message_list code">
                            <input type="text" v-model="code" placeholder="手机验证码" />
                            <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
                        </div>
                        <div class="content_message_password" :class="{ 'on': !phone }">
                            <div class="message_password_left"></div>
                        </div>
                        <div class="content_message_submit" @click="login" :disabled="!phone || !code">登录</div>
                    </div>
                    <div class="right_content_message" v-show="n==2">
                        <div class="content_message_list">
                            <input type="text" v-model="phone2" ref="phoneInput2" placeholder="手机号/邮箱" />
                        </div>
                        <div class="content_message_list code">
                            <input :type='pwdFlag?"password":"text"' size='10' placeholder="密码" />
                            <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">
                        </div>
                        <div class="content_message_password" :class="{ 'on': !phone2 }">
                            <div class="message_password_left">请输入手机号码和密码</div>
                            <div class="message_password_right">忘记密码？</div>
                        </div>
                        <div class="content_message_submit" @click="login2">登录</div>
                    </div>
                    <div class="right_content_bottom">
                        <p>如果是第一次登录系统会为您自动创建一个账户</p>
                        <p>登录注册即表示同意<a href="https://www.ai-dog.net/serviceAgreement.html" target="_blank">用户协议</a></p>
                    </div>
                    <div class="right_content_WeChat">第三方登录:<div class="content_WeChat_btn" @click="f=2"><img src="@a/img/sv1.svg" /></div></div>
                </div>
            </div>
            <div class="ScanCode" v-show="f==2">
                <div class="Login_right_title">扫码登录</div>
                <div class="ScanCode_title">请切换手机登录</div>
                <div class="ScanCode_img"></div>
                <div class="ScanCode_btn"><span @click="f=1">切换手机号登录</span></div>
                <div class="ScanCode_p">登录注册即表示同意<a href="https://www.ai-dog.net/serviceAgreement.html" target="_blank">用户协议</a></div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
    import { MessageBox } from 'element-ui';
    let interval_login = null;
    export default {
        name: "Login",
        data() {
            return {
                n:1,
                f:2,
                pwdFlag:true,//密码标示 true表示当前是密码形式
                textIcon:require("@a/img/sv2.svg"),//展示图标
                pwdIcon:require("@a/img/sv3.svg"),//隐藏图标
                phone: '',
                phone2: '',
                code: '',
                countDown: 60,
                counting: false,
                qrcode: '',
                scene: '',
                union_id: '',
                showBind: false,
            }
        },
        methods: {
           //改变密码表示
            changePwd:function(){
                //密码标示取反即可
                this.pwdFlag=!this.pwdFlag;
            },
            active (num) {
                this.ins=num
            },
            sendCode() {
                // 判断手机号码是否为空
                if (!this.phone) {
                    this.$refs.phoneInput.focus();
                    this.$message({
                        message: '请输入手机号码!',
                        type: 'warning'
                    });
                    return;
                }

              this.axios.get('/api/common/sendVerifyCode', {params: {
                  to : this.phone
                }}).then(res=>{
               // 启动倒计时
                this.counting = true;
                let interval = setInterval(() => {
                  if (this.countDown > 0) {
                    this.countDown--;
                  } else {
                    this.counting = false;
                    this.countDown = 60;
                    clearInterval(interval);
                  }
                }, 1000);
              })



            },
            login() {
              let that = this;
                // 判断手机号码和验证码是否为空
                if (!this.phone || !this.code) {
                    this.$refs.phoneInput.focus();
                    this.$message({
                        message: '请输入手机号码和验证码!',
                        type: 'warning'
                    });
                    return;
                }
                let promoter_id = localStorage.getItem('promotion_id')
                this.axios.post(
                    '/api/common/login',
                    {
                        "to": that.phone,
                        "verify": that.code,
                        'promoter_id' :promoter_id
                    }
                ).then(res => {
                  if(res.code === 1) {
                    localStorage.setItem('token', res.result.token )
                    that.$store.commit('setLogin', true)
                    that.axios.get('/api/member/getInfo').then(res => {
                      localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                      that.$store.commit('setMemberInfo', res.result)
                      localStorage.removeItem('promotion_id')
                      let back_url = that.$route.query.back_url
                      if (back_url) {
                        let decodedUrl = decodeURIComponent(back_url);
                        that.$router.push(decodedUrl)
                      }else{
                        that.$router.push('/')
                      }
                    })

                  }

                })

            },
            login2() {
                // 判断手机号码和验证码是否为空2
                if (!this.phone2) {
                    this.$refs.phoneInput2.focus();
                    this.$message({
                        message: '请输入手机号码和验证码!',
                        type: 'warning'
                    });
                    return;
                }

                // 登录
                // ...
            },
            login_bind(){
              let that = this;
              // 判断手机号码和验证码是否为空
              if (!this.phone || !this.code) {
                this.$refs.phoneInput.focus();
                this.$message({
                  message: '请输入手机号码和验证码!',
                  type: 'warning'
                });
                return;
              }
              let promoter_id = localStorage.getItem('promotion_id')
              this.axios.post(
                  '/api/common/login',
                  {
                    "to": that.phone,
                    "verify": that.code,
                    "official_openid" : that.union_id,
                    'promoter_id' : promoter_id
                  }
              ).then(res => {
                if(res.code === 1 ) {
                  localStorage.setItem('token', res.result.token )
                  that.$store.commit('setLogin', true)
                  that.axios.get('/api/member/getInfo').then(res => {
                    localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                    that.$store.commit('setMemberInfo', res.result)
                    localStorage.removeItem('promotion_id')
                    let back_url = that.$route.query.back_url
                    if (back_url) {
                      let decodedUrl = decodeURIComponent(back_url);
                      that.$router.push(decodedUrl)
                    }else{
                      that.$router.push('/')
                    }
                  })


                }

              })
            }
        },
        created(){
          let that = this;


          let vkey = this.$route.query.vkey;
          if(vkey) {
            that.axios.post('/api/common/vLogin',{vkey}).then(
                res => {
                  if(res.code === 1) {
                    localStorage.setItem('token', res.result.token )
                    that.$store.commit('setLogin', true)
                    that.axios.get('/api/member/getInfo').then(res => {
					            this.$store.commit('setIsMockLogin',true);//设置为模拟登录,在header组件里会用文字提醒
                      localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                      that.$store.commit('setMemberInfo', res.result)
                      localStorage.removeItem('promotion_id')
                      let back_url = that.$route.query.back_url
                      if (back_url) {
                        let decodedUrl = decodeURIComponent(back_url);
                        that.$router.push(decodedUrl)
                      }else{
                        that.$router.push('/')
                      }
                    })

                  }
                }
            )
          }else{
            this.axios.get('/api/common/getQrcode').then(res=>{
              that.qrcode = res.result.qrcode_url;
              that.secne = res.result.qrcode_scene;
              interval_login = setInterval(function() {
                that.axios.get('/api/common/isScanner', {
                  params: {
                    scene: res.result.qrcode_scene
                  }
                }).then(res => {
                  if (res.code === 1) {
                    if (res.result.status == 'login') {
                      clearInterval(interval_login)
                      localStorage.setItem('token', res.result.token)
                      that.$store.commit('setLogin', true)
                      that.axios.get('/api/member/getInfo').then(res => {
                        localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                        that.$store.commit('setMemberInfo', res.result)
                      })
                      that.$router.go(-1);
                    }
                    if (res.result.status == 'bind') {
                      clearInterval(interval_login)
                      that.showBind = true;
                      that.union_id = res.result.official_openid
                    }
                  }
                })
              }, 1000)
            })
          }
        },
        unmounted(){
              clearInterval(interval_login)
        }

    }
</script>

<style>
@import "login.css";
</style>
